﻿/**
 * @Description: 数据来源
 * @Author: Tom
 * @Date: 2020-02-10 17:03:45
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-04-14 16:59:40
 */
$(function () {
    var strCondition = []; //用于生成最终合成表格的条件
    $('#input-search').bind('keypress', function (event) {
        if (event.keyCode == "13") {
            $("#btn-search").click();
        }
    });

    // 获取可查询的数据库名称列表
    var dbname = '';
    $.ajax({
        type: "post",
        async: false,
        url: "/BaseAshx/SmartStatistics/ExploreData.ashx",
        data: {
            mtype: "ExploreData_GetDataBaseList"
        },
        datatype: "json",
        success: function (result) {
            result = JSON.parse(result);
            // console.log(result);
            if (result.code == 200) {
                var html = '';
                result.data.map(function (item, index) {
                    html += '<option>' + item.NAME + '</option>';
                });
                $('#dbName').html(html);
                dbname = $('#dbName').val();
                searchData();
            } else {
                console.log(result.exp);
            }
        },
        error: function (err) {
            console.log(err);
        }
    });
    $('#dbName').on('change', function (e) {
        dbname = $(this).val();
        searchData();
    });

    //初始化左侧栏
    function searchData() {
        console.log(dbname);
        $(".tab-content").html('');
        $.ajax({
            type: "post",
            async: false,
            url: "/BaseAshx/SmartStatistics/ExploreData.ashx",
            data: {
                mtype: "DataBinding_InitialTableList",
                dbname: dbname
            },
            datatype: "json",
            success: function (result) {
                // console.log(result);
                var strArr = result.split("||");
                var str = JSON.parse(strArr[0]);
                if (str) {
                    for (var i = 0; i < str.length; i++) {
                        var div1 = document.createElement("div");
                        div1.setAttribute("class", "control-group component");
                        //div1.setAttribute("rel","popover");
                        //div1.setAttribute("title","文本框控件");
                        //div1.setAttribute("trigger","manual");
                        div1.setAttribute("style", "margin-top:5px;margin-bottom:5px;border-top: 0px solid white; border-bottom: none; float: left;");
                        var div2 = document.createElement("div");
                        div2.setAttribute("class", "controls");
                        var input1 = document.createElement("input");
                        input1.setAttribute("name", "leipiNewField");
                        input1.setAttribute("type", "text");
                        input1.setAttribute("placeholder", str[i].TABLE_NAME);
                        // input1.setAttribute("title", "文本框");
                        input1.setAttribute("class", "leipiplugins");
                        input1.setAttribute("leipiplugins", "text");
                        div2.appendChild(input1);
                        div1.appendChild(div2);
                        $(".tab-content").append(div1);
                    }
                } else {
                    console.log(strArr[1]);
                }
            },
            error: function (xhr) {
                console.log(xhr.responseText);
            }
        });
    }

    //清空拖拽div
    clearDataTable = function () {
        var target = $("#target");
        target.children().empty();

        addedFieldsContent = [];
        $("#tableBody2, #tableBody").html("");

        strCondition = [];
        $('#mytable2, #show, #mytable').hide();

        $('.getDataTable').addClass('disabled');
    };

    //初始化可选的所有表格
    getDataTable = function (a) {
        if ($(a).hasClass('disabled')) {
            return;
        }
        var top = $('#mytable2').position().top;
        var left = $('#mytable2').position().left + $('#mytable2').width() + 15;

        $("#show").css({
            top: top + 'px',
            left: left + 'px'
        }).show();
        var target = $("#target");
        var n = target.children().children().length;
        var targetArr = [];
        for (var i = 0; i < n; i++) {
            targetArr.push("" + target.children().children()[i].children[0].children[0].placeholder);
        }

        var select1 = document.getElementById("table1");
        var select2 = document.getElementById("table2");
        $("#table1").empty();
        $("#table2").empty();

        for (var i = 0; i < n; i++) {
            var option = document.createElement("option");
            option.innerHTML = targetArr[i];
            select1.appendChild(option);
        }
        for (var i = 0; i < n; i++) {
            var option = document.createElement("option");
            option.innerHTML = targetArr[i];
            select2.appendChild(option);
        }
        $("#table1").val(targetArr[0]);
        $("#table2").val(targetArr[1]);

        getFieldnames();
    };

    //获取所选表格的各自所有字段
    getFieldnames = function () {
        var newTargetArr = [];
        var targetArr = [];
        var target1 = $("#table1");
        var target2 = $("#table2");
        var newTarget1 = target1[0].value;
        var newTarget2 = target2[0].value;
        targetArr.push(newTarget1);
        targetArr.push(newTarget2);
        for (var i = 0; i < targetArr.length; i++) {
            var obj = new Object();
            newTargetArr.push(obj);
            newTargetArr[i].name = targetArr[i];
        }
        $.ajax({
            type: "post",
            async: false,
            url: "/BaseAshx/SmartStatistics/ExploreData.ashx",
            data: {
                mtype: "GetMultiTableFieldList",
                arr: JSON.stringify(newTargetArr), //表名称列表
                dbname: dbname //所选数据库名称
            },
            datatype: "json",
            success: function (result) {
                if (result) {
                    var arr = result.split("||");
                    $("#field1").empty();
                    $("#field2").empty();

                    var select1 = document.getElementById("field1");
                    var select2 = document.getElementById("field2");
                    for (var i in JSON.parse(arr[0])) {
                        var option = document.createElement("option");
                        option.innerHTML = JSON.parse(arr[0])[i].COLUMN_NAME;
                        select1.appendChild(option);
                    }
                    for (var i in JSON.parse(arr[1])) {
                        var option = document.createElement("option");
                        option.innerHTML = JSON.parse(arr[1])[i].COLUMN_NAME;
                        select2.appendChild(option);
                    }

                }
            }
        });
    };

    //初始化拖拽单表的所有字段
    var addedFieldsContent = []; //根据数组内容防止重复添加字段
    addField = function (obj) {
        var target = $(obj).children().children()[0].placeholder;
        $.ajax({
            type: "post",
            async: false,
            url: "/BaseAshx/SmartStatistics/ExploreData.ashx",
            data: {
                mtype: "GetSimpleTableFieldList",
                tablename: target, // 原名是value，值为用户所选或填写的数据库表名、历史关联表名
                dbname: dbname // 所选数据库名称
            },
            datatype: "json",
            success: function (result) {
                result = result.split('||');
                if (result[0]) {
                    //addedFieldsContent.push(target);
                    var str = JSON.parse(result[0]);
                    var mybody = document.getElementById("tableBody2");
                    if (!(addedFieldsContent.indexOf(target) > -1)) {
                        for (var i = 0; i < str.length; i++) {
                            var tr = document.createElement("tr");
                            tr.setAttribute("style", "text-align:left;height:30px;");
                            var td = document.createElement("td");
                            td.innerHTML = "<input disabled type='checkbox' style='margin-left: 5px;margin-right: 5px;'/>" + target + "." + str[i].COLUMN_NAME;
                            td.setAttribute("style", "border:1px solid #63a0c4;width:250px");
                            tr.appendChild(td);
                            mybody.appendChild(tr);
                        }
                        addedFieldsContent.push(target);
                        $('#mytable2').show();
                    }
                } else {
                    console.log(result[1]);
                }
            }
        });
    };
    //移除拖拽单表的所有字段
    removeField = function (obj) {
        var target = $(obj).children().children()[0].placeholder;
        var mybody = document.getElementById("tableBody2");
        var n = mybody.children.length;
        for (var i = n - 1; i >= 0; i--) {
            if (mybody.children[i].textContent.match(target))
                mybody.children[i].remove();
        }

        var t = 0;
        for (var i = 0; i < addedFieldsContent.length; i++) {
            if (addedFieldsContent[i] == target)
                t = i;
        }
        addedFieldsContent.splice(t, 1);
        if (!$('#tableBody2 tr').length) {
            $('#mytable2').hide();
        }
    };
    //根据所选字段建立关联表格的相互关系
    buildCorrelation = function () {
        var newTargetArr = [];
        var targetArr = [];
        var target1 = $("#table1");
        var target2 = $("#table2");
        var newTarget1 = target1[0].value;
        var newTarget2 = target2[0].value;

        var value1 = $("#table1")[0].value;
        var value2 = $("#field1")[0].value;
        var value3 = $("#table2")[0].value;
        var value4 = $("#field2")[0].value;
        var value5 = $("#relatedWay")[0].value;

        var c = [];
        if (value1 == value3) {
            alert('不可关联同一表格的字段');
        } else if (value1 != undefined && value2 != undefined && value3 != undefined && value4 != undefined && value1 != value3) {
            c.push(value1);
            c.push(value2);
            c.push(value3);
            c.push(value4);
            c.push(value5);

            // var arr = c[0] + "." + c[1] + "=" + c[2] + "." + c[3];
            var arr = c[0] + "." + c[1] + "=" + c[2] + "." + c[3] + "=" + c[4];
            var hasSame = strCondition.some(function (item, index) {
                return arr == item;
            });
            if (hasSame) {
                alert('此关联已存在');
                return;
            }
            strCondition.push(arr);

            $("#mytable").show();
            var tableBody = document.getElementById("tableBody");
            var tr = document.createElement("tr");
            tableBody.appendChild(tr);
            document.getElementById("tableBody").append(tr);
            for (var i = 0; i < c.length; i++) {
                var td = document.createElement("td");
                td.innerHTML = c[i];
                td.setAttribute("style", "border:1px solid #63a0c4;");
                tr.appendChild(td);
            }
            var td = document.createElement("td");
            //td.innerHTML = "<button onclick='removeRow(this)' class='RightButton' style='background-color:#808080;'>删除关联</button><button onclick='createTable(this)' class='RightButton'  style='background-color:#808080;'>生成表格</button><button class='RightButton'  style='background-color:#808080;'>保存入库</button>";
            td.innerHTML = "<button onclick='up(this)' class='RightButton upButton' style='background-color:#808080;'>上移</button><button onclick='removeRow(this)' class='RightButton' style='background-color:#808080;'>删除关联</button>";
            td.setAttribute("style", "border:1px solid #63a0c4;");
            tr.appendChild(td);
            $("#tableBody").find('.upButton').show();
            $("#tableBody").find('tr').eq(0).find('.upButton').hide();
        }
        changeNowGuanlian();
        scrollIsShow();
    };
    //删除行记录
    removeRow = function (obj) {
        var target = $(obj).parent().siblings();
        var str = "";
        str = target[0].textContent + "." + target[1].textContent + "=" + target[2].textContent + "." + target[3].textContent;
        var p;
        for (var i = 0; i < strCondition.length; i++) {
            if (strCondition[i] == str)
                p = i;
        }
        strCondition.splice(p, 1);
        $(obj).parent().parent().remove();
        changeNowGuanlian();
        scrollIsShow();
    };
    // 判断是否出现了滚动条
    var scrollIsShow = function () {
        if ($('#tableBody')[0].scrollHeight > $('#tableBody')[0].clientHeight) {
            $('#mytable thead').css('width', 'calc(100% - 10px)');
        } else {
            $('#mytable thead').css('width', '100%');
        }
    };
    // 记录当前关联表格
    var nowGuanlian;
    var changeNowGuanlian = function () {
        nowGuanlian = [];
        strCondition.forEach(function (item, index) {
            item.split('=').forEach(function (ite, ind) {
                var name = ite.split('.')[0];
                if (nowGuanlian.indexOf(name) == -1) {
                    nowGuanlian.push(name);
                }

            });
        });
        // 左侧字段显示联动
        $('#tableBody2 input').attr('disabled', true);
        $('#tableBody2 td').each(function (index, item) {
            var name = $(item).text().split('.')[0];
            if (nowGuanlian.indexOf(name) > -1) {
                $(item).find('input').removeAttr('disabled');
            }
        });
        if ($('#tableBody2 input:not([disabled])').length) {
            $('#quanxuan').removeAttr('disabled');
        } else {
            $('#quanxuan').attr('disabled', true);
        }
        // 清空左侧选择
        $('#quanxuan, #tableBody2 input[type="checkbox"]').prop('checked', false);
    };

    //全选或全不选勾选字段
    submitFields = function (a) {
        //var mybody = document.getElementById("tableBody2");
        //if (mybody.children.length == 0)
        //    return;
        //else {
        //    var objs = $("#tableBody2").children().children().find("input");
        //    if (objs.attr("checked") != "checked")
        //        objs.attr("checked", "checked");
        //    else
        //        objs.attr("checked", null);
        //}
        var checked = $(a).prop('checked');
        var $checkbox = $('#tableBody2 input:not([disabled])');
        $checkbox.prop('checked', checked);
    };
    //生成最终关联表格
    var mypPagerownum = 10;
    getSyntheticTable = function () {
        var content = '<span>' + '自定义SQL串' + '：</span><textarea id="sqlTextarea" class="layui-layer-input" style="resize: none;width:250px;height:120px;background-color: #3a3e50; color:#fff; margin-top:10px; border-color:#0094ff; border-radius:3px;" autocomplete="new-password"></textarea><br/ >';
        layer.open({
            type: 1,
            title: '是否使用自定义SQL串',
            skin: 'layui-layer-prompt',
            content: content,
            btn: ['使用', '不使用,直接合成'],
            area: ['300px', '300px'],
            shadeClose: true, //点击遮罩关闭
            btn1: function (index, layero) {
                var sqlText = $('#sqlTextarea').val();
                //sqlText = 'select t4.A1_A,t4.A1_B,t4.A1_C,t4.A1_D,t4.A2_B,t4.A2_C,t4.A2_D,t4.A3_B,t4.A3_C,t4.A3_D,t4.A4_B,t4.A4_C,t4.A4_D,t4.A6_B,t4.A6_C,t4.A6_D,A5.B as A5_B,A5.C as A5_C,A5.D as A5_Dfrom(select t3.A1_A,t3.A1_B,t3.A1_C,t3.A1_D,t3.A2_A,t3.A2_B,t3.A2_C,t3.A2_D,t3.A3_A,t3.A3_B,t3.A3_C,t3.A3_D,t3.A4_A,t3.A4_B,t3.A4_C,t3.A4_D,A6.A as A6_A,A6.B as A6_B,A6.C as A6_C,A6.D as A6_D from(select t2.A1_A,t2.A1_B,t2.A1_C,t2.A1_D,t2.A2_A,t2.A2_B,t2.A2_C,t2.A2_D,t2.A3_A,t2.A3_B,t2.A3_C,t2.A3_D,A4.A as A4_A,A4.B as A4_B,A4.C as A4_C,A4.D as A4_D from(select t1.A1_A,t1.A1_B,t1.A1_C,t1.A1_D,t1.A2_A,t1.A2_B,t1.A2_C,t1.A2_D,A3.A as A3_A,A3.B as A3_B,A3.C as A3_C,A3.D as A3_D from(select A1.A as A1_A,A1.B as A1_B,A1.C as A1_C,A1.D as A1_D,A2.A as A2_A,A2.B as A2_B,A2.C as A2_C,A2.D as A2_D from A1, A2 where A1.A = A2.A) t1,A3 where t1.A2_A = A3.A) t2 left join A4 on t2.A3_A = A4.A) t3 right join A6 on t3.A4_A = A6.A) t4 right join A5 on A5.A = t4.A6_A'
                if (sqlText) {
                    getTable(sqlText);
                    layer.close(index);
                } else {
                    layer.msg('请输入自定义SQL串', {
                        shade: 0.3,
                        time: 1000 // 1秒关闭
                    });
                }
            },
            btn2: function (index, layero) {
                getTable();
                layer.close(index);
            },
        });
    };


    getTable = function (sqlText, currentpage) {
        var data = {
            mtype: "DataBinding_GetJoinTable",
            dbname: dbname, //所选数据库名称
            sql: '', //自定义SQL串【新增】
            field: '', //sql为空时，需要提供关联表的显示字段
            binding: '', //sql为空时，需要提供关联表的关联关系
            currentpage: currentpage || 1, //合成表的分页页号【新增】
            pagerownum: mypPagerownum || 5, //合成表的每页记录数【新增】
            isreturntotal: 1, //是否返回记录总数，0否，1是【新增】
        };
        if (sqlText) {
            window.mysql = sqlText;
            data.sql = sqlText;
        } else {
            window.mysql = '';
            var binding = [];
            $('#tableBody tr').each(function (index, item) {
                var $item = $(item);
                var str1 = $item.find('td').eq(0).html() + '.' + $item.find('td').eq(1).html();
                var str2 = $item.find('td').eq(2).html() + '.' + $item.find('td').eq(3).html();
                var way;
                var html = $item.find('td').eq(4).html();
                if (html == '左联') {
                    way = 1;
                } else if (html == '右联') {
                    way = 2;
                } else if (html == '等值') {
                    way = 0;
                }
                binding.push({
                    'condition': str1 + '=' + str2,
                    'way': way
                });
            });
            var field = [];
            $("#tableBody2 input:checked").each(function (index, item) {
                var textArr = $(item).parent().text().split('.');
                field.push({
                    "tablename": textArr[0],
                    "fieldname": textArr[1]
                });
            });
            data.binding = JSON.stringify(binding);
            data.field = JSON.stringify(field);
        }

        $.ajax({
            type: "post",
            async: false,
            url: "/BaseAshx/SmartStatistics/ExploreData.ashx",
            data: data,
            datatype: "json",
            success: function (result) {
                // console.log(result);
                result = JSON.parse(result);
                if (result.code == 200) {
                    var table = result.data.table;
                    // var html = '<tr style="background-color: #2a5d8e;">';
                    // Object.keys(table[0]).forEach(function (key) {
                    //     html += '<th style="min-width:100px;height:30px;text-align: center;border: 1px solid #63a0c4;">' + key + '</th>';
                    // });
                    // html += '</tr >';
                    // table.map(function (item, index) {
                    //     html += '<tr>';
                    //     Object.values(item).forEach(function (item2, index2) {
                    //         html += '<td style="border:1px solid #63a0c4;text-align:center;">' + item2 + '</td>';
                    //     });
                    //     html += '</tr>';
                    // });
                    var html = '<tbody><tr class="head" align="center">';
                    Object.keys(table[0]).forEach(function (key) {
                        html += '<th>' + key + '</th>';
                    });
                    html += '</tr>';
                    table.map(function (item, index) {
                        html += '<tr>';
                        Object.values(item).forEach(function (item2, index2) {
                            html += '<td>' + item2 + '</td>';
                        });
                        html += '</tr>';
                    });
                    html += '</tbody>';

                    $("#userTable").html(html);
                    $("#tableShade").show();
                    // if ($('#pagination').length == 0) {
                    //     $('#dataTreeDiv').append('<div id="pagination" class="pagination"></div>');
                    // }

                    new Page({
                        id: 'pagination',
                        pageTotal: Math.ceil(result.data.total / mypPagerownum), //必填,总页数（最少1页）
                        pageAmount: mypPagerownum, //每页多少条
                        dataTotal: result.data.total, //总共多少条数据（至少1条）
                        curPage: currentpage || 1, //初始页码,不填默认为1
                        pageSize: 5, //分页个数,不填默认为5
                        showPageTotalFlag: true, //是否显示数据统计,不填默认不显示
                        showSkipInputFlag: true, //是否支持跳转,不填默认不显示
                        getPage: function (page) {
                            //获取当前页数
                            console.log('当前是第' + page + '页');
                            // 请求数据
                            getTable(window.mysql, page);
                        }
                    });
                } else {
                    alert(result.exp);
                }
            },
            error: function (err) {
                console.log(err);
            }
        });
    };
    // 关闭最终关联表格
    closeSyntheticTable = function () {
        $("#tableShade, #finalTable").hide();
    };
    // 保存最终关联表格
    saveBtn = function () {
        var html = '<span>' + '合成表名称' + '：</span> <input style="background-color: #fff;color: #000;text-align: left;margin-top: 10px;" id="tableName" type="text" class="layui-layer-input" autocomplete="new-password" value="">';
        var content = '<div>' + html + '</div>';
        layer.open({
            id: 4,
            type: 1,
            title: '请输入合成表名称',
            skin: 'layui-layer-prompt',
            content: content,
            btn: ['确定', '取消'],
            shadeClose: true, //点击遮罩关闭
            btn1: function (index, layero) {
                var tableName = $('#tableName').val();
                if (tableName) {
                    layer.close(index);
                    SaveInfo(tableName);
                } else {
                    layer.msg('请输入合成表名称', {
                        shade: 0.3,
                        time: 1000 // 1秒关闭
                    });
                }
            },
            btn2: function (index, layero) {
                layer.close(index);
            },
        });
    };

    SaveInfo = function (tableName) {
        var data = {
            mtype: 'DataBinding_SaveInfo',
            dbname: dbname,//所选数据库名称
            bdname: tableName, //合成表名称
            user: 'admin', // 假用户
            sql: '', //自定义SQL串【新增】
            field: '', //sql为空时，需要提供关联表的显示字段
            binding: '', //sql为空时，需要提供关联表的关联关系
        };
        if (window.mysql) {
            data.sql = window.mysql;
        } else {
            var binding = [];
            $('#tableBody tr').each(function (index, item) {
                var $item = $(item);
                var str1 = $item.find('td').eq(0).html() + '.' + $item.find('td').eq(1).html();
                var str2 = $item.find('td').eq(2).html() + '.' + $item.find('td').eq(3).html();
                var way;
                var html = $item.find('td').eq(4).html();
                if (html == '左联') {
                    way = 1;
                } else if (html == '右联') {
                    way = 2;
                } else if (html == '等值') {
                    way = 0;
                }
                binding.push({
                    'condition': str1 + '=' + str2,
                    'way': way
                });
            });
            var field = [];
            $("#tableBody2 input:checked").each(function (index, item) {
                var textArr = $(item).parent().text().split('.');
                field.push({
                    "tablename": textArr[0],
                    "fieldname": textArr[1]
                });
            });
            data.binding = JSON.stringify(binding);
            data.field = JSON.stringify(field);
        }
        $.ajax({
            type: "post",
            async: false,
            url: "/BaseAshx/SmartStatistics/ExploreData.ashx",
            data: data,
            datatype: "json",
            success: function (result) {
                // console.log(result);
                result = result.split('||');
                if (result[0] == '200') {
                    alert('存储多表关联信息成功！');
                    $('.fa-trash').click();
                } else {
                    alert(result[1]);
                }
            },
            error: function (err) {
                console.log(err);
            }
        });
    };

    // 提交统计专题名称
    submitStatisticsName = function () {
        var arr1 = [];
        $('#build input[name="leipiNewField"]').each(function (index, item) {
            arr1.push($(item).attr('placeholder'));
        });
        var arr2 = [];
        $('#tableBody2 input[type="checkbox"]:checked').each(function (index, item) {
            arr2.push($(item).parent().text());
        });
        console.log('提交数据', strCondition);
    };

    //生成最终关联表格(旧的)
    //function createTable(obj) {
    //    var target = $(obj).parent().siblings();
    //    var str = "";
    //    for (var i = 0 ; i < target.length;i++){
    //        str = str + target[i].textContent + ",";
    //    }
    //    str = str.substring(0, str.length - 1);
    //    $.ajax({
    //        type: "post",
    //        async: false,
    //        url: "/BaseAshx/SmartStatistics/ExploreData.ashx",
    //        data: {
    //            mtype: "生成关联表格",
    //            value: str
    //        },
    //        datatype: "json",
    //        success: function (result) {
    //            if (result) {
    //                $("#finalTable").show();
    //                var finalTable = document.getElementById("mybody");
    //                $("#mybody").empty();
    //                var res = JSON.parse(result);
    //                var tr0 = document.createElement("tr");
    //                tr0.setAttribute("style", "background-color: #3a3e52;");
    //                var n = 0;
    //                for (var i in res[0]) {
    //                    var th = document.createElement("th");
    //                    th.setAttribute("style", "min-width:100px;height:30px;text-align: center;border: 1px solid #63a0c4;");
    //                    th.innerHTML = i;
    //                    tr0.appendChild(th);
    //                    ++n;
    //                }
    //                document.getElementById("firstth").setAttribute("colspan",n);
    //                finalTable.appendChild(tr0);
    //                for (var i = 0 ; i < res.length; i++) {
    //                    var tr = document.createElement("tr");
    //                    for (var j in res[i]) {
    //                        var td = document.createElement("td");
    //                        td.innerHTML = res[i][j];
    //                        td.setAttribute("style", "border:1px solid #63a0c4;text-align:center;");
    //                        tr.appendChild(td);
    //                    }
    //                    finalTable.appendChild(tr);
    //                }
    //            } else
    //                alert("并无关联关系，请重新选择");
    //        }

    //    })

    //}
    function resizeWindow() {
        var DEBUG;
        //DEBUG= true;
        if (DEBUG) {
            [].forEach.call($($('*')), function (a) {
                a.style.outline = '1px solid #' + (~~(Math.random() * (1 << 24))).toString(16);
            });
        }

        console.log('resize...');
        $('#mainright').outerWidth($('#main').width() - $('#mainleft').width() - 10);
        $('#main').outerHeight($('body').outerHeight() - $('.RightMainTitle').outerHeight() - parseInt($('#main').css('margin-top')) - parseInt($('#main').css('margin-bottom')) - 20);
        $('#mytable').outerWidth($('#mainright').width() - $('#mytable2').outerWidth() - 15);
        // $('.RightMainTitle').width($('#main').width());
    }
    resizeWindow();
    // resize窗口
    window.onresize = function () {
        resizeWindow();
        //$('#show, #mytable').show()
    };



    up = function (ite) {
        var $tbody = $('#tableBody');
        var $tr = $(ite).parent().parent();
        var index = $tr.index();
        if (index <= 0) {
            return;
        }
        $tr.remove();
        $tbody.find('tr').eq(index - 1).before($tr[0].outerHTML);
        $tbody.find('.upButton').show();
        $tbody.find('tr').eq(0).find('.upButton').hide();

        console.log($tr[0].toString());
    };

    var html = '<thead style = "width: 100%;">< tr style = "background-color: #3a3e52;" > <th colspan="6" style="text-align: center; border: 0px solid #63a0c4; height: 30px;"> 关联表格 </th> </tr><tr style="background-color: #2a5d8e; "><th> 表名1 </th> <th> 表字段1 </th> <th> 表名2 </th> <th> 表字段2 </th> <th> 关联方式 </th> <th> 相关操作 </th> </tr> </thead> ' +
        '<tbody id="tableBody">' +
        '< tr > <td style="border:1px solid #63a0c4;"> 1 </td> <td style="border:1px solid #63a0c4;">DLMC</td > <td style="border:1px solid #63a0c4;"> V_DLTB2 </td> <td style="border:1px solid #63a0c4;">DLMC</td > <td style="border:1px solid #63a0c4;"> 左联 </td><td style="border:1px solid #63a0c4;"><button onclick="up(this)" class="upButton RightButton" style="background-color:#808080;">上移</button > <button onclick="removeRow(this)" class="RightButton" style="background-color:#808080;"> 删除关联 </button></td> </tr>' +
        '< tr > <td style="border:1px solid #63a0c4;"> 2 </td> <td style="border:1px solid #63a0c4;">DLMC</td > <td style="border:1px solid #63a0c4;"> V_DLTB2 </td> <td style="border:1px solid #63a0c4;">DLMC</td > <td style="border:1px solid #63a0c4;"> 左联 </td><td style="border:1px solid #63a0c4;"><button onclick="up(this)" class="upButton RightButton" style="background-color:#808080;">上移</button > <button onclick="removeRow(this)" class="RightButton" style="background-color:#808080;"> 删除关联 </button></td> </tr>' +
        '< tr > <td style="border:1px solid #63a0c4;"> 3 </td> <td style="border:1px solid #63a0c4;">DLMC</td > <td style="border:1px solid #63a0c4;"> V_DLTB2 </td> <td style="border:1px solid #63a0c4;">DLMC</td > <td style="border:1px solid #63a0c4;"> 左联 </td><td style="border:1px solid #63a0c4;"><button onclick="up(this)" class="upButton RightButton" style="background-color:#808080;">上移</button > <button onclick="removeRow(this)" class="RightButton" style="background-color:#808080;"> 删除关联 </button></td> </tr>' +
        '< tr > <td style="border:1px solid #63a0c4;"> 4 </td> <td style="border:1px solid #63a0c4;">DLMC</td > <td style="border:1px solid #63a0c4;"> V_DLTB2 </td> <td style="border:1px solid #63a0c4;">DLMC</td > <td style="border:1px solid #63a0c4;"> 左联 </td><td style="border:1px solid #63a0c4;"><button onclick="up(this)" class="upButton RightButton" style="background-color:#808080;">上移</button > <button onclick="removeRow(this)" class="RightButton" style="background-color:#808080;"> 删除关联 </button></td> </tr>' +
        '</tbody > ';

    // $('#mytable').html(html).show();
    // $('#tableShade,#finalTable').show();





    scrollIsShow();
    resizeWindow();



});